<template>
	<view class="xilu">
		<view class="page-foot bg-normal plr25">
			<template v-if="info.user_signed == 1">
				<view class="btn2 mb30">已报名</view>
			</template>
			<template v-else>
				<view @click.stop="lessonSign()" v-if="info.is_plan == 1" class="btn1 mb30">去预约(时间)（<text
						class="col7">{{info.order_count || 0}}</text>/{{info.sign_count || 0 }}）</view>
				<view @click.stop="lessonSign()" v-else-if="info.is_plan == 2" class="btn1 mb30">可排队</view>
				<view v-else-if="info.is_plan == 3" @click.stop="lessonSign()" class="btn1 mb30">去预约(时间)（<text
						class="col7">{{info.order_count || 0}}</text>/{{info.sign_count || 0 }}）</view>
				<!-- <view v-else-if="info.is_plan == 3" class="btn2 mb30">已开始</view> -->
				<!-- <view v-else-if="info.is_plan == 4" class="btn2 mb30">已结束</view> -->
				<view v-else-if="info.is_plan == 4" @click.stop="lessonSign()" class="btn1 mb30">去预约(时间)（<text
						class="col7">{{info.order_count || 0}}</text>/{{info.sign_count || 0 }}）</view>
			</template>

		</view>
		<view class="container">
			<view class="pr">
				<swiper class="xilu_swiper_info" @change="swiperTab" :current="current" :circular="true"
					:autoplay="true" :interval="3000" :duration="1000">
					<swiper-item v-for="(vo,index) in thumb_images">
						<image :src="vo" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
				<view class="xilu_swiper_dot">{{ current + 1 }}/{{ thumb_images.length || 0}}
				</view>
				<!-- <image v-if="web_url" :src="web_url+'/uniapp_image/xilu_mask.png'" mode="aspectFill" class="xilu_mask">
				</image> -->
			</view>
			<view class="pr mt_132 z5 plr25 pb30">
				<view class="flex-box">
					<view class="col2 fs36 fw500 lh50 flex-grow-1"></view>
					<view @click="user_invite()">
						<image src="@/static/images/xilu_icon9.png" mode="aspectFill" class="ico24"></image>
						<text class="ml10 fs28 colf">分享有礼</text>
					</view>
				</view>
				<view class="pr mt30 xilu_lession_info">
					<image v-if="web_url" :src="web_url + '/uniapp_image/xilu_bg_info_big.png'" mode="aspectFill"
						class="xilu_lession_info_bg">
					</image>
					<view class="xilu_lession_info_view p30">
						<view class="flex-box">
							<image src="@/static/icon/name.png" mode="aspectFill" class="ico28 mid"></image>
							<view class="flex-grow-1 fs38 colf lh40 pl10">
								课程：{{info.course.title || ''}}
							</view>
						</view>
						<view class="mt40 flex" @tap="openLocation(info.shop.lat,info.shop.lng)">
							<image src="@/static/images/xilu_icon_address_gray.png" mode="aspectFill"
								class="ico28 mid mt8"></image>
							<view class="flex-grow-1 plr10">
								<view class="w460 fs28 colf lh40 m-ellipsis-l2">{{info.shop.address || ''}} <span
										class="fs24 col9 lh32 ml20">{{distance}}</span>
								</view>

							</view>
							<view class="tc">
								<image src="@/static/images/xilu_guide.png" mode="aspectFill" class="ico30 mt5"></image>
								<view class="col9 fs24 mt10 lh34">导航</view>
							</view>
						</view>
					</view>
				</view>
				<div class="xilu_box dark-theme" v-if="course_type != 3">
					<!-- 日期导航 -->
					<view class="ptb30 bb flex-box date-nav">
						<template v-for="(vo,keys) in classTimeList">
							<view
								:class="choose_date == vo.day_date ? 'xilu_date_nav_item active' : 'xilu_date_nav_item'"
								@tap="chooseDate(vo.day_date)">
								<view>{{vo.day || ''}}</view>
								<view class="mt5">{{vo.week || ''}}</view>
							</view>
						</template>
					</view>
				
					<!-- 可选课程列表 -->
					<view class="chooseTimeListContent">
						<template v-if="choose_time_list_content.length > 0">
							<div class="time-option" v-for="item in choose_time_list_content">
								<view class="option-text">
									<text class="date">{{ item.class_time_txt }}
										{{item.start_at}}-{{item.end_at}}</text>
									<!-- <text class="price">{{ item.course_price }}元</text> -->
								</view>
								<view class="option-text">
									
									<text class="price">{{ item.course_price }}元</text>
								</view>
								<!-- <view class="add-icon">+</view> -->
							</div>
				
						</template>
						<template v-else>
							<view class="empty-data" :style="[{'line-height':100 + 'rpx'}]">这天没有课程</view>
						</template>
					</view>
					<!-- 已选课程列表 -->
					<!-- <template v-if="chooseClassTimeList.length > 0">
						<view class="ptb30 bb flex-box selected-header">
							<view class="flex-grow-1 fs28">已选课程 ({{ chooseClassTimeList.length }}节)</view>
							<view class="total-price">总计: {{ choose_pay_price }}元</view>
						</view>
				
						<view class="chooseClassTimeList">
							<view class="selected-item" v-for="(item, index) in chooseClassTimeList" :key="index">
								<view class="item-text">
									<text class="date">{{ item.class_time_txt }}
										{{item.start_at}}-{{item.end_at}}
										</text>
									<text class="price">{{ parseFloat(item.course_price).toFixed(2) }}元</text>
								</view>
								<view class="delete-btn" @click.stop="closeTime(index)">×</view>
							</view>
						</view>
					</template>
					<template v-else>
						<view class="empty-tips">
							<view>暂未选择任何课程</view>
						</view>
					</template> -->
				</div>
				<view class="xilu_box flex-box" v-if="coach_info"
					@click="redirect_coach_info((coach_info.id || 0),(info.shop.id || 0))">
					<image :src="coach_info.xilufitness_urls.coach_avatar || '../../static/images/avatar.png'"
						mode="aspectFill" class="xilu_head_big"></image>
					<view class="flex-grow-1 pl30">
						<view class="fs40 fw500 lh56 col3">{{coach_info.coach_name || ''}}
							<span class="group_name">{{coach_info.group_name}}</span>
						</view>

						<view class="mt30 fs28 col9 lh40">{{coach_info.lable_list.join('·')}}</view>
					</view>
				</view>
				<view class="xilu_box" style="padding-left: 28rpx;padding-right: 28rpx;"
					v-if="sign_list.list && sign_list.list.length > 0">
					<view class="col3 fs36 fw500 lh50">本期报名（{{sign_list.user_count || 0}}人）</view>
					<view style="font-size: 0;">
						<image :src="vo.user.xilufitness_urls.avatar || '../../static/images/avatar.png' "
							mode="aspectFill" class="xilu_mini_head" v-for="(vo,index) in sign_list.list"></image>
					</view>
				</view>
				<!-- <view class="xilu_box" v-if="info.course.content">
					<view class="pb30 mb30 fs36 fw500 colf lh50 bb">次课包</view>
					<template v-if="classOnceList.length > 0">
						<view style="color: #fff;">
							<class-once :classOnceList="classOnceList"></class-once>
						</view>
					</template>
					
					<template v-else>
						<empty-data :tips="'暂无次课包'" :lineHeight="100"></empty-data>
					</template>
				</view> -->

				<view class="xilu_box" v-if="info.course.content">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">课程介绍</view>
					<view style="color: #000;">
						<mp-html class="mb30" :content="info.course.content"></mp-html>
					</view>
				</view>
				<view class="xilu_box" v-if="info.course.tip_content">
					<view class="pb30 mb30 fs36 fw500 col3 lh50 bb">注意事项</view>
					<view style="color: #000;">
						<mp-html :content="info.course.tip_content"></mp-html>
					</view>
				</view>

				<view class="xilu_box" style="padding-bottom: 0;">
					<view class="flex-box flex-between mb30">
						<view class="fs36 fw500 col3">用户评价</view>
						<view class="xilu_btn_more" @click="commentList(info.course_id,info.course_type)">更多评价</view>
					</view>

					<template v-if="comment_list.length > 0">

						<view class="xilu_pj_item" v-for="(vo,keys) in comment_list">
							<view class="flex-box">
								<image :src="vo.user.xilufitness_urls.avatar || '../../static/images/avatar.png' "
									mode="aspectFill" class="xilu_pj_item_head_img">
								</image>
								<view class="flex-grow-1 pl30">
									<view class="flex-box">
										<view class="flex-grow-1 m-ellipsis pr10 fs30 fw500 col3 lh30">
											{{vo.user.nickname || ''}}
										</view>
										<view class="fs24 col89 lh24">{{vo.createtime_txt || ''}}</view>
									</view>
									<view class="mt10 fs24 col2 lh36">
										<image src="@/static/images/xilu_star.png" mode="aspectFill"
											class="xilu_pj_item_star mr10"></image>{{vo.star || 0}}分
									</view>
								</view>
							</view>
							<view class="fs30 col9 lh44 mt10">{{vo.content || ''}}</view>
						</view>
					</template>

					<template v-else>
						<empty-data :tips="'暂无评论'" :lineHeight="100"></empty-data>
					</template>


				</view>




			</view>
		</view>
		<u-authorize @onAuthCancel="onAuthCancel($event)" @onAuthConfirm="onAuthConfirm($event)"
			:popupStatus="auth_status" :isAuth="2"></u-authorize>
	</view>
</template>

<script>
	const app = getApp();
	const webConfig = require("@/util/config");
	export default {
		data() {
			return {
				current: 0,
				swiperList: ['', '', '', '', '', '', ''],
				info: null,
				course_type: 1,
				coach_info: null,
				thumb_images: [],
				content: [],
				tip_content: [],
				sign_list: [],
				comment_list: [],
				auth_status: false,
				web_url: '',
				distance: null,
				classOnceList: [],
				classTimeList: [],
				choose_date: "",
				choose_time_list_content: [],
				
			}
		},
		methods: {

			// getHomeData() {
			// 	console.log('111',app.globalData.cityInfo['id']);
			// 	console.log('222',app.globalData.cityInfo['province_id']);
			// 	let _this = this;
			// 	this.classOnceList = [1]
			// 	this.$http({
			// 		url: '/addons/xilufitness/wrap/index',
			// 		data: {
			// 			lat: app.globalData.lat,
			// 			lng: app.globalData.lng,
			// 			city_id: app.globalData.cityInfo['id'] || 0,
			// 			province_id: app.globalData.cityInfo['province_id'] || 0
			// 		},
			// 		method: 'get'
			// 	}).then(res => {
			// 		if (res.code == 1) {
						
			// 			// _this.classOnceList = res.data.list;
			// 			// console.log(_this.classOnceList);
			// 		}
			// 	}).catch(error => {
			// 		console.log('home_error', error);
			// 	})
			// },
			//获取详情
			getDetail(id, is_type, choose_date) {
				let url = '';
				let _this = this;
				if (is_type == 3) {
					url = '/addons/xilufitness/course/getCampDetail';
				} else {
					url = '/addons/xilufitness/course/detail';
				}
				this.$http({
					url: url,
					data: {
						id: id,
						choose_date: choose_date || ''
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						
						// _this.info = res.data.info;

						if (is_type == 3) {
							
						} else {
							_this.classTimeList = res.data.classTimeList
							_this.choose_time_list_content = res.data.list
							_this.choose_date = _this.choose_date || res.data.classTimeList[0].day_date
							console.log(res.data)

							
						}
					}
				}).catch(error => {
					console.log('orderDedetail', error);
				})
			},
			chooseDate(day_date) {
				this.choose_date = day_date;
				// this.choose_time_list_content = day_date
				this.getDetail(this.work_course_id, this.info.course_type, this.choose_date)
			},

			swiperTab(e) {
				this.current = Number(e.target.current)
			},
			//课程详情
			detail(id) {
				let _this = this;
				if(!app.globalData.lat || app.globalData.lat==''){
					app.globalData.lat = '36.70864';
					app.globalData.lng = '119.13279';
				}
				this.$http({
					url: '/addons/xilufitness/course/detail',
					data: {
						id: id,
						lat: app.globalData.lat,
						lng: app.globalData.lng,
					},
					method: 'get'
				}).then(res => {
					if (res.code == 1) {
						// _this.classOnceList = res.data.info.wrap_list;
						// if(_this.course_type != 3){
						// 	_this.classTimeList = res.data.classTimeList;
						// 	// _this.choose_time_list_content = res.data.info.list;
							
						// }
						_this.classOnceList = res.data.info.wrap_list;
						_this.info = res.data.info || '';
						_this.thumb_images = res.data.info.course.xilufitness_urls.thumb_images || [];
						_this.coach_info = res.data.info.coach;
						_this.sign_list = res.data.userList || [];
						// _this.choose_date = _this.choose_date || res.data.classTimeList[0].day_date
						_this.getComments((res.data.info.course_id || 0), (res.data.info.course_type || 1));
						
						this.distance = (_this.info.shop.distance / 1000).toFixed(1) + 'km';
						_this.getDetail((this.work_course_id|| 0), (res.data.info.course_type || 1))

					}
				}).catch(error => {
					console.log('courseDetailError', error);
				})
			},
			//打开地图
			openLocation(lat, lng) {
				this.$api.openLocation(lat, lng);
			},
			//去预约
			lessonSign() {
				let token = this.$api.getCache('token');
				let info = this.info;
				if (!token) {
					this.show = false;
					this.auth_status = true;
					console.log('111', this.auth_status);
				} else {
					this.$api.navigate('../pay_order/pay_order?id=' + info.id + '&is_type=' + this.course_type);
				}
			},
			//授权取消
			onAuthCancel(e) {
				this.auth_status = false;
				this.$api.toast('取消授权，可能会使部分服务不能用，或页面信息不完整')
			},
			//授权成功
			onAuthConfirm(e) {
				this.auth_status = false;
			},
			//邀请有礼
			user_invite() {
				let token = this.$api.getCache('token');
				if (!token) {
					this.auth_status = true;
				} else {
					this.$api.navigate('../invite/invite');
				}
			},
			//教练详情
			redirect_coach_info(id, shop_id) {
				this.$api.navigate('../trainer_info/trainer_info?id=' + id + '&shop_id=' + shop_id);
			},
			//更多评论
			commentList(course_camp_id, course_type) {
				this.$api.navigate('../user_appraise_list/user_appraise_list?course_camp_id=' + course_camp_id +
					'&course_type=' + course_type);
			},
			/**
			 * 开启定位
			 */
			getHomeLocation() {
				let _this = this;
				this.$api.getLocation(function(res) {
					console.log(res);
					
					if (res.latitude && res.longitude) {
						app.globalData.lat = res.latitude;
						app.globalData.lng = res.longitude;
					} else {
						app.globalData.lat = '36.70864';
						app.globalData.lng = '119.13279';
						// app.globalData.lat = '31.231859';
						// app.globalData.lng = '121.486561';
					}
					_this.detail(this.work_course_id);
					
				});
			},
			//获取评论
			getComments(course_camp_id, course_type) {
				let _this = this;
				this.$http({
					url: '/addons/xilufitness/course/getCommentList',
					data: {
						id: course_camp_id,
						course_type: course_type
					}
				}).then(res => {
					if (res.code == 1) {
						_this.comment_list = res.data.list || [];
					}
				});
			}

		},
		mounted() {

		},
		onLoad(options) {

			this.web_url = webConfig.base_url || '';
			this.course_type = options.is_type || 1;
			this.work_course_id = options.id
			
			
			this.work_course_id = options.id;
			// if(app.globalData.lat){
				this.detail(options.id || 0);
			// }else{
			// 	this.getHomeLocation();
			// }
			// this.getHomeData()
		},

		onShareAppMessage() {

		}
	}
</script>

<style lang="scss" scoped>
	.group_name {
		display: inline-block;
		height: 39rpx;
		line-height: 39rpx;
		background: linear-gradient(90deg, #FFD26A 0%, #FFB94E 100%);
		border-radius: 19rpx;
		padding: 0 15rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #000000;
		margin-left: 20rpx;
	}

	.xilu {
		&_date_nav {
			width: 700rpx;
			height: 145rpx;
			background: #404243;
			border-radius: 20rpx;
		
			&_item {
				width: 58rpx;
				height: 110rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				margin-left: 42rpx;
				line-height: 40rpx;
				text-align: center;
				padding-top: 13rpx;
			}
		
			&_item:first-child {
				margin-left: 16rpx;
			}
		
			&_item.active {
				background: #FFCF00;
				border-radius: 29rpx;
				color: #101010;
				line-height: 40rpx;
			}
		}
		&_swiper_info {
			width: 100%;
			height: 750rpx;
			position: relative;

			image {
				width: 100%;
				height: 100%;
				display: block;
			}
		}

		&_mask {
			width: 100%;
			height: 380rpx;
			position: absolute;
			bottom: 0;
			z-index: 3;
			left: 0;
		}

		&_swiper_dot {
			display: inline-block;
			height: 39rpx;
			line-height: 39rpx;
			background: rgba(0, 0, 0, 0.25);
			border-radius: 20rpx;
			position: absolute;
			font-size: 24rpx;
			font-weight: 400;
			color: #FFFFFF;
			right: 30rpx;
			bottom: 194rpx;
			padding-left: 15rpx;
			padding-right: 15rpx;
			z-index: 4;
		}

		&_lession_info {
			width: 700rpx;
			height: 220rpx;
			z-index: 1;

			&_bg {
				width: 700rpx;
				height: 220rpx;
				position: relative;
				z-index: 1;
			}

			&_view {
				width: 700rpx;
				height: 220rpx;
				position: absolute;
				z-index: 1;
				left: 0;
				top: 0;
			}
		}

		&_box {
			background: #fff;
			border-radius: 20rpx;
			width: 100%;
			margin-top: 30rpx;
			padding: 30rpx;
		}

		&_head_big {
			width: 130rpx;
			height: 130rpx;
			border-radius: 50%;
		}

		&_mini_head {
			width: 90rpx;
			height: 90rpx;
			border: 2rpx solid #FFFFFF;
			position: relative;
			margin-top: 30rpx;
			margin-left: -12rpx;
			display: inline-block;
			vertical-align: top;
			border-radius: 50%;

			&:first-child,
			&:nth-of-type(9n) {
				margin-left: 0;
			}
		}

		&_btn_more {
			font-size: 22rpx;
			font-weight: 400;
			color: #999999;
			width: 146rpx;
			height: 55rpx;
			line-height: calc(55rpx - 2px);
			text-align: center;
			border-radius: 28rpx;
			border: 1px solid #979797;
		}

		&_pj_item {

			border-top: 1px solid #434343;
			padding-top: 20rpx;
			padding-bottom: 20rpx;

			&_head_img {
				width: 75rpx;
				height: 75rpx;
				border-radius: 50%;
			}

			&_star {
				width: 23rpx;
				height: 21rpx;
			}
		}
	}

	.mt_132 {
		margin-top: -132rpx;
	}

	.z5 {
		z-index: 5;
	}

	.bb {
		border-bottom: 1px solid #434343;
	}
	.chooseTimeListContent {
		margin-top: 20px;
	}
	.time-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 14px 16px;
		margin-bottom: 10px;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	
	.option-text {
		display: flex;
		gap: 15px;
	}
	
	.add-icon {
		font-size: 20px;
		font-weight: bold;
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.price {
		color: #ffcf00;
		font-weight: 500;
	}
	.date-nav {
		overflow-x: auto;
		scrollbar-width: none;
		background-color: #E8EEFE;
		border-radius: 20rpx;
	}
	
	.date-nav::-webkit-scrollbar {
		display: none;
	}
	
	.xilu_date_nav_item {
		// min-width: 70px;
		// padding: 12px 8px;
		text-align: center;
		border-radius: 6px;
		cursor: pointer;
		transition: all 0.3s ease;
		flex-shrink: 0;
		margin-left: 30rpx !important;
	}
	
	.xilu_date_nav_item .day {
		font-size: 16px;
		font-weight: 500;
	}
	
	.xilu_date_nav_item .week {
		font-size: 12px;
		opacity: 0.8;
	}
	/* 暗色主题样式 */
	.dark-theme {
		// background-color: #1a1a1a;
		color: #333;
	}
	
	.dark-theme .xilu_date_nav_item {
		color: #333;
	}
	
	.dark-theme .xilu_date_nav_item.active {
		background-color: #ffcf00;
		color: #000;
		border-color: #ffcf00;
	}
	.dark-theme .chooseTimeListContent .time-option {
		background-color: #E8EEFE;
		border-left: 4px solid #ffcf00;
	}
	
	.dark-theme .chooseTimeListContent .time-option:hover {
		background-color: #FFCF00;
	}
	.dark-theme .chooseClassTimeList {
		background-color: #2d2d2d;
	}
	
	.dark-theme .chooseClassTimeList .selected-item {
		background-color: #252525;
		border-left: 3px solid #ff4d4f;
	}
	
	.dark-theme .delete-btn {
		color: #ff4d4f;
	}
	
	.dark-theme .delete-btn:hover {
		background-color: rgba(255, 77, 79, 0.2);
	}
	
	.dark-theme .total-price {
		color: #FF6105;
	}
	
	.dark-theme .add-icon {
		color: #52c41a;
	}
</style>